<template>
    <div class="fieldManage zy-content ">
      <searchPrams @search="search"/>
        <div class="list-layout mt16">


            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="getTableColumns(columns)">
                    {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
                </Button>
            </div>

          <div class="tableContent">
            <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" ellipsis ref="selection" :data="dataArr">
              <template slot-scope="{ row ,index}" slot="action">
                <span class="operationBtn" @click="editImage(row)">{{ $t('common.Edit') }}</span>
              </template>
              <template slot-scope="{ row ,index}" slot="img">
                <img class="columnImage" v-if="row.filePath" style="margin: 20px 0" height="100" :src="util.filePathToUrl(row.filePath)"
                     alt=""
                     @click="lookImage(row)">
              </template>
            </Table>
          </div>
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" />
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>
        <Modal :mask-closable="false"
            v-model="create"
            width="1000px"
            :title="addtitle"
            class="modal-content-layout"
            :loading="loading">
            <Upload
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                type="drag"
                :action="fileUploadUrl"
                :data="{dir:'device'}">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>{{$t('点击或将文件拖拽到这里上传')}}</p>
                </div>
            </Upload>
            <div class="imgWrap" :class="{isHasImage:file.filePath}">
                <img @click="lookImage(file)" v-if="file.filePath" :src="util.filePathToUrl(file.filePath)" alt="">
                <span v-if="file.filePath" class="del" @click="deleteImage">x</span>
            </div>
            <div slot="footer">
                <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false"
            v-model="showImage"
            width="1000px"
            :title="$t('设备图片')"
            class="modal-content-layout"
            :loading="loading">
            <img width="100%" :src="imageFile" alt="">
            <div slot="footer">
                <Button type="default" @click="showImage = false">{{ $t('common.Cancle') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import searchPrams from "./component/searchPrams";
import util from '@/util/util'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "fieldManage",
    components: {searchPrams},
    mixins:[toggleTableOperation],
    data() {
        return {
            showImage: false,
            formItem: {},
            addtitle: "",
            allCheck: false,
            loading: false,
            create: false,
            paramsList: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            columns: [
                {
                    title: `${this.$t('common.company')}`,
                    key: 'companyName',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.Installation')}`,
                    key: 'position4',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('equipCheck.EquipmentNo')}`,
                    key: 'deviceNo',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('equipCheck.EquipmentName')}`,
                    key: 'deviceName',
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '设备图片',
                    title: `${this.$t('设备图片')}`,
                    key: 'code',
                    align: 'center',
                    slot: "img",
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    width: 100,
                    align: "center",
                    fixed:"right"
                }
            ],
            dataArr: [],
            delFaultCodeShowF: false,//是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: null,
            selection: [],
            checkBtnPermission: {},
            params: {},
            file: {},
            imageFile: "",
            fileUploadUrl: ""
        }
    },
    created() {
        this.getTableColumnsWidth(this.columns)
    },
    mounted() {
        this.fileUploadUrl = `${util.getEnv()}/fileServer/upload`
    },
    methods: {
        handleSuccess(file) {
            const {fileName, filepath, fileUrl,fileLength,suffix} = file.data;
            this.file = Object.assign(this.file, {
                fileName, filePath: filepath, fileUrl,suffix,fileSize:fileLength
            })
            this.$forceUpdate()
        },
        deleteImage() {
            this.file = Object.assign(this.file, {
                fileName: "", filePath: "", fileUrl: ""
            })
            this.$forceUpdate()
        },
        search(params) {
            this.params = params
            this.changeNum()
        },
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {//查询列表
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.params
            };
            for (let key in this.paramsList) {
                if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                }
            }
            this.axios({
                method: 'get',
                url: '/dms/dmsDevicePic/list',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        lookImage({filePath}) {
            this.imageFile = this.util.filePathToUrl(filePath)
            this.showImage = true
        },
        editImage(row) {//点击增加或编辑
            this.addtitle = `${this.$t('common.Edit')}`
            const {fileName, filePath, fileUrl, id, deviceId,fileSize,suffix} = row
            this.file = {fileName, filePath, fileUrl, id, deviceId,fileSize,suffix};
            this.create = true
            this.create = true;
        },
        addOk() {
            if (!this.file.fileUrl) {
                this.$Message.warning(({content:this.$t('请上传图片'), duration: 6, closable: true}));
                return;
            }
            this.axios({
                method: 'post',
                url: '/dms/dmsDevicePic/add',
                data: {
                    ...this.file,
                  fileDocumentEnumPath: "DEVICE_SCREEN_PICTURE"
                }
            }).then(res => {
                if (res.code === 200) {
                    this.$Message.success(res.msg);
                    this.create = false
                    this.changePageNum(1)
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.imgWrap {
    //padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    margin-top: 20px;
    position: relative;
    min-height: 200px;

    &.isHasImage {
        //border: #66666652 solid 2px;
    }

    img {
        height: 200px;
        width: auto;
        cursor: pointer;
    }

    .del {
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 11;
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #000;
        text-align: center;
        line-height: 25px;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
    }
}

.columnImage {
    cursor: pointer;
}

.fieldManage {
    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;
        }
    }
}
</style>

<style lang="scss">

</style>
